<template>
	<view class="container">
		<view class="not_login" v-if="!authStore.isLogin">
			<view class="not_login_box">
				<u-empty text="还没有登录哦" textSize="14" width="100" height="100" icon="https://tianliyx.oss-cn-shanghai.aliyuncs.com/images/20250311/0057423001741660320.png"></u-empty>
				<button class="login_btn" @click="COMMON.toLogin();">去登录</button>
			</view>
		</view>
		<view v-else>
			<view class="cart_list" v-if="list.length">
				<view class="list_item" v-for="(item, index) in list">
					<image :src="item.file_path" class="file_path"></image>
					<view class="goods_msg">
						<view class="title">{{item.goods_name}}</view>

						<view class="props">
							{{ item.goods_props && item.goods_props.join(' & ') }}
						</view>

						<view v-if="item.status != 20 && item.status != 30">
							<view class="price">
								<view class="b_price">
									<text class="sub">￥</text><text>{{ item.goods_price }}</text>
									<text v-if="item.couponPrice"> (优惠券 -{{item.couponPrice}})</text>
								</view>
							</view>

							<view class="number-box">
								<view class="numberControl">
									<text class="btn iconfont icon-jianshao" v-if="item.goods_num == 1"></text>
									<text class="btn iconfont icon-jianshao" @click="updateNum(item, 'cut')"
										v-else></text>
									<input type="text" v-model="item.goods_num" disabled="true" />
									<text class="btn iconfont icon-zengjia" @click="updateNum(item, 'puls')"></text>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="price">
								<view class="b_price">
									<text>该商品已失效，请删除商品</text>
								</view>
							</view>

						</view>

					</view>
					<view class="t_check" :class="item.selected == 1 ? 'checked' : ''" @click="cart_select(item)"
						v-if="item.status != 20 && item.status != 30"></view>
					<text class="iconfont icon-shanchu" @click="delete_cart(item.cart_id)"></text>
				</view>
				<view class="h_150"></view>
			</view>
			<view class="u-empty" v-else>
				<u-empty text="购物车还没有商品哦" icon="https://tianliyx.oss-cn-shanghai.aliyuncs.com/images/20250311/0057423001741660320.png"></u-empty>
			</view>
		</view>
		<view class="cart_fix"  v-if="authStore.isLogin">
			<view class="fl">
				<view class="t_check" :class="allChecked && 'checked'" @click="cart_all_select"></view>
			</view>
			<view class="total_box">
				<view class="coupon_price">合计优惠：-￥{{ couponPrices.toFixed(2) }}</view>
				<view class="total_price">合计：<text>￥{{ total.toFixed(2) }}</text></view>
			</view>
			<view class="fr">
				<button class="p_btn sub_btn" @click="buyGoods">去结算</button>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "@/utils/commom.js"
	import {
		useAuthStore
	} from '@/stores/user.js';
	import {
		checkoutInfo
	} from '@/stores/checkout.js';
	import {
		get_cart_list,
		delete_all,
		cart_selected,
		update_cart_sum
	} from "@/api/cart.js"

	const list = ref([]);
	const allChecked = ref(false);
	const selected_list = ref([]);
	const total = ref(0);
	const couponPrices = ref(0);

	const authStore = useAuthStore();
	const addressStore = checkoutInfo();

	onShow(() => {
		authStore.initialize();
		if (authStore.isLogin) {
			addressStore.clearState();
			COMMON.get_cart_count();
			get_list();
		}
	})
	
	// 去结算
	function buyGoods(){
		if(!authStore.isLogin){
			COMMON.toLogin();
			return
		}
		if (selected_list.value.length) {
			uni.navigateTo({
				url: `/pages/checkout/cart?cart_id=${selected_list.value}`
			});
		} else {
			COMMON.Toast(`请勾选下单商品!`)
		}
	}


	//获取列表
	function get_list() {
		get_cart_list().then(res => {
			let data = res.data;
			list.value = data;
			COMMON.get_cart_count();
			selected_items(data);
		})
	}

	// 单选商品
	function cart_select(item) {
		cart_selected({
			cart_id: item.cart_id,
			selected: item.selected == 1 ? 0 : 1
		}).then(res => {
			setTimeout(function() {
				get_list();
			}, 1);
		})
	}

	// 全选
	function cart_all_select() {
		let cart_id = [],
			selected = [];
		allChecked.value = !allChecked.value;
		for (let i = 0; i < list.value.length; i++) {
			let item = list.value[i];
			if (item.status != 20 && item.status != 30) {
				cart_id.push(item.cart_id);
				selected.push(allChecked.value ? 1 : 0);
			}
		}

		cart_selected({
			cart_id,
			selected
		}).then(res => {
			setTimeout(function() {
				get_list();
			}, 1);
		})
	}

	// 获取已勾选商品
	function selected_items(data) {
		let cart_id = [],
			selected = [];
			total.value = 0;
			couponPrices.value = 0;
		for (let i = 0; i < list.value.length; i++) {
			let item = list.value[i];
			if (item.status != 20 && item.status != 30) {
				if (item.selected == 1) {
					cart_id.push(item.cart_id);
					selected.push(item);
					total.value += item.goods_num * item.goods_price;
					couponPrices.value += item.couponPrice;
				}
			}
		}
		total.value = total.value - couponPrices.value;
		selected_list.value = cart_id;
		if(list.value.length){
			list.value.length == selected.length ? allChecked.value = true : allChecked.value = false
		}
		
	}


	//商品数量增减
	function updateNum(item, type) {
		update_cart_sum({
			cart_id: item.cart_id,
			goods_id: item.goods_id,
			goods_sku_id: item.goods_sku_id,
			goods_num: type == 'puls' ? 1 : -1
		}).then(res => {
			setTimeout(function() {
				get_list();
			}, 1);
		})

	}


	//删除商品
	function delete_cart(cart_id) {
		uni.showModal({
			content: '您确定要移除商品吗?',
			success: function(res) {
				if (res.confirm) {
					delete_all(cart_id).then(res => {
						uni.showToast({
							title: '删除成功',
							icon: "none",
							success() {
								setTimeout(function() {
									get_list();
								}, 1);
							}
						});
					})
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	.cart_list {
		width: 100%;
		overflow: auto;
		padding: 30rpx;
		padding-top: 10rpx;
		.h_150 {
			width: 100%;
			display: block;
			height: 150rpx;
		}

		.list_item {
			width: 100%;
			overflow: hidden;
			border-radius: 10px;
			background-color: #fff;
			padding: 30rpx 50rpx;
			margin-bottom: 20rpx;
			position: relative;

			.file_path {
				width: 170rpx;
				height: 170rpx;
				float: left;
				border-radius: 10px;
			}

			.goods_msg {
				width: 400rpx;
				float: right;
				line-height: 34rpx;

				.title {
					font-size: 26rpx;
					color: #333;
				}

				.props {
					font-size: 22rpx;
					color: #999;
					padding: 20rpx 0;
				}

				.price {
					width: 100%;
					overflow: hidden;

					.b_price {
						float: left;

						.sub {
							font-size: 22rpx;
							font-weight: 400;
						}

						text {
							font-size: 28rpx;
							color: #f00;
							font-weight: 600;
						}
					}
				}

				.number-box {
					margin-top: 20rpx;
				}
			}

			.icon-shanchu {
				position: absolute;
				font-size: 32rpx;
				color: #ccc;
				bottom: 40rpx;
				right: 50rpx;
			}

			.t_check {
				position: absolute;
				bottom: 20rpx;
				left: 20rpx;
			}
		}
	}

	.cart_fix {
		width: 100%;
		overflow: hidden;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		padding: 20rpx 50rpx;
		background-color: #fff;
		border-top: 1px solid #f3f3f3;

		.fl {
			float: left;
			padding-top: 20rpx;
		}

		.fr {
			float: right;

			.p_btn {
				width: 220rpx;
				height: 80rpx;
				background: #F00;
				font-size: 32rpx;
				line-height: 80rpx;
				color: #fff;
				border-radius: 50px;
			}

			.sub_btn {
				background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
			}
		}

		.total_box {
			float: left;
			margin-left: 50rpx;

			.coupon_price {
				font-size: 24rpx;
				color: #F00;
			}

			.total_price {
				font-size: 30rpx;
				color: #f00;
				font-weight: 600;
			}
		}
	}

	.numberControl {
		width: 170rpx;
		height: 50rpx;

		.btn {
			width: 50rpx;
			height: 50rpx;
			float: left;
			padding: 0;
			border: none;
			text-align: center;
			color: #ccc;
			font-size: 50rpx;
			line-height: 20px;
			border-radius: 1px;
			border-radius: 1px;
			margin-top: 8rpx;
		}

		input {
			width: 70rpx;
			height: 50rpx;
			text-align: center;
			float: left;
			color: #f00;
			border-radius: 1px;
			font-weight: 400;
			border: none;
		}
	}

	.not_login{
		width: 100%;
		overflow: hidden;
		padding: 30rpx;
		.not_login_box{
			border-radius: 10px;
			height: 60vh;
			padding-top: 100rpx;
			background-color: #fff;
			.login_btn{
				width: 300rpx;
				height: 80rpx;
				background: #F00;
				font-size: 32rpx;
				line-height: 80rpx;
				color: #fff;
				border-radius: 50px;
				margin: 20rpx auto;
				margin-top: 50rpx;
				background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
			}
		}
	}

</style>